@use '../config';
@use './util';

/* - Background 背景 -
************************* */

@mixin background($key, $value) {
  $prop: background-attachment;

  @if $key == 'attachment' {
    $prop: background-attachment;
  }
  @else if $key == 'clip' {
    $prop: background-clip;
  }
  @else if $key == 'color' {
    $prop: background-color;
  }
  @else if $key == 'origin' {
    $prop: background-origin;
  }
  @else if $key == 'position' {
    $prop: background-position;
  }
  @else if $key == 'repeat' {
    $prop: background-repeat;
  }
  @else if $key == 'size' {
    $prop: background-size;
  }
  @else if $key == 'image' {
    $prop: background-image;
  }

  #{$prop}: $value;
}

// Background Attachment
@if util.expect(config.$abbr-background-attachment) {

  @each $value in (
    fixed,
    local,
    scroll
  ) {

    #{util.class-generator(config.$abbr-background-attachment, $value)}
    {
      @include background(attachment, $value);
    }

  }

}

// Background Clip
@if util.expect(config.$abbr-background-clip) {

  @each $key, $value in (
    border: border-box,
    padding: padding-box,
    content: content-box,
    text: text
  ) {

    #{util.class-generator(config.$abbr-background-clip, $key)}
    {
      @include background(clip, $value);
    }

  }

}

// Background Color
@if util.expect(config.$abbr-background-color) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-backgroundColor) {

    // transparent 为内置关键字，加 ’‘ 转换为普通字符串
    @if ($outer-key == inherit) or ($outer-key == 'current') or ($outer-key == transparent + '') or ($outer-key == 'black') or ($outer-key == 'white') {

      #{util.class-generator(config.$abbr-background-color, $outer-key)}
      {
        @include background(color, $outer-value);
      }

    }
    @else {

      #{util.class-generator(config.$abbr-background-color, $outer-key)}
      {
        --bg-opacity: 1;
        @include background(color, rgba($color: $outer-value, $alpha: var(--bg-opacity, 1)));
      }

      @each $inner-key, $inner-value in util.map-handler(util.$map-color-brightness) {

        #{util.class-generator(config.$abbr-background-color, $outer-key, $inner-key)}
        {
          --bg-opacity: 1;
          @include background(color, rgba($color: util.lighter-color($outer-value, $inner-value), $alpha: var(--bg-opacity, 1)));
        }

      }

    }

  }

}

// Background Color Opacity
@if util.expect(config.$abbr-background-opacity) {

  @each $key, $value in util.map-handler(config.$map-backgroundOpacity) {

    #{util.class-generator(config.$abbr-background-opacity, $key)}
    {
      --bg-opacity: #{$value};
    }

  }

}

// Background Origin
@if util.expect(config.$abbr-background-origin) {

  @each $key, $value in (
    border: border-box,
    padding: padding-box,
    content: content-box
  ) {

    #{util.class-generator(config.$abbr-background-origin, $key)}
    {
      @include background(origin, $value);
    }

  }

}

// Background Position
@if util.expect(config.$abbr-background-position) {

  @each $key, $value in util.map-handler(config.$map-backgroundPosition) {

    #{util.class-generator(config.$abbr-background-position, $key)}
    {
      @include background(position, $value);
    }

  }

}

// Background Repeat
@if util.expect(config.$abbr-background-repeat) {

  @each $key, $value in (
    repeat: repeat,
    no-repeat: no-repeat,
    repeat-x: repeat-x,
    repeat-y: repeat-y,
    repeat-round: round,
    repeat-space: space
  ) {

    #{util.class-generator(config.$abbr-background-repeat, $key)}
    {
      @include background(repeat, $value);
    }

  }

}

// Background Size
@if util.expect(config.$abbr-background-size) {

  @each $key, $value in util.map-handler(config.$map-backgroundSize) {

    #{util.class-generator(config.$abbr-background-size, $key)}
    {
      @include background(size, $value);
    }

  }

}

// Background Image
@if util.expect(config.$abbr-background-image) {

  @each $key, $value in util.map-handler(config.$map-backgroundImage) {

    #{util.class-generator(config.$abbr-background-image, $key)}
    {
      @include background(image, $value);
    }

  }

}

// Background Image Gradient Stops From
@if util.expect(config.$abbr-background-image-gradient-from) {

  @each $outer-key, $outer-value in config.$map-backgroundColor {

    @if $outer-key == inherit {}
    @else if $outer-key == transparent + '' {

      #{util.class-generator(config.$abbr-background-image-gradient-from, $outer-key)}
      {
        --gradient-from: transparent;
        --gradient-stops:
          var(--gradient-from),
          var(--gradient-to, rgba(0, 0, 0, 0));
      }

    }
    @else if $outer-key == current {

      #{util.class-generator(config.$abbr-background-image-gradient-from, $outer-key)}
      {
        --gradient-from: currentColor;
        --gradient-stops:
          var(--gradient-from),
          var(--gradient-to, rgba(255, 255, 255, 0));
      }

    }
    @else {

      #{util.class-generator(config.$abbr-background-image-gradient-from, $outer-key)}
      {
        --gradient-from: #{$outer-value};
        --gradient-stops:
          var(--gradient-from),
          var(--gradient-to, #{rgba($color: $outer-value, $alpha: 0)});
      }

      @each $inner-key, $inner-value in util.map-handler(util.$map-color-brightness) {

        #{util.class-generator(config.$abbr-background-image-gradient-from, $outer-key, $inner-key)}
        {
          --gradient-from: #{rgba($color: util.lighter-color($outer-value, $inner-value), $alpha: 1)};
          --gradient-stops:
            var(--gradient-from),
            var(--gradient-to, #{rgba($color: util.lighter-color($outer-value, $inner-value), $alpha: 0)});
        }

      }

    }

  }

}

// Background Image Gradient Stops Via
@if util.expect(config.$abbr-background-image-gradient-via) {

  @each $outer-key, $outer-value in config.$map-backgroundColor {

    @if $outer-key == inherit {}
    @else if $outer-key == transparent + '' {

      #{util.class-generator(config.$abbr-background-image-gradient-via, $outer-key)}
      {
        --gradient-stops:
          var(--gradient-from),
          transparent,
          var(--gradient-to, rgba(0, 0, 0, 0));
      }

    }
    @else if $outer-key == current {

      #{util.class-generator(config.$abbr-background-image-gradient-via, $outer-key)}
      {
        --gradient-stops:
          var(--gradient-from),
          currentColor,
          var(--gradient-to, rgba(255, 255, 255, 0));
      }

    }
    @else {

      #{util.class-generator(config.$abbr-background-image-gradient-via, $outer-key)}
      {
        --gradient-stops:
          var(--gradient-from),
          #{$outer-value},
          var(--gradient-to, #{rgba($color: $outer-value, $alpha: 0)});
      }

      @each $inner-key, $inner-value in util.map-handler(util.$map-color-brightness) {

        #{util.class-generator(config.$abbr-background-image-gradient-via, $outer-key, $inner-key)}
        {
          --gradient-stops:
            var(--gradient-from),
            #{rgba($color: util.lighter-color($outer-value, $inner-value), $alpha: 1)},
            var(--gradient-to, #{rgba($color: util.lighter-color($outer-value, $inner-value), $alpha: 0)});
        }

      }

    }

  }

}

// Background Image Gradient Stops To
@if util.expect(config.$abbr-background-image-gradient-to) {

  @each $outer-key, $outer-value in config.$map-backgroundColor {

    @if $outer-key == inherit {}
    @else if $outer-key == transparent + '' {

      #{util.class-generator(config.$abbr-background-image-gradient-to, $outer-key)}
      {
        --gradient-to: transparent;
      }

    }
    @else if $outer-key == current {

      #{util.class-generator(config.$abbr-background-image-gradient-to, $outer-key)}
      {
        --gradient-to: currentColor;
      }

    }
    @else {

      #{util.class-generator(config.$abbr-background-image-gradient-to, $outer-key)}
      {
        --gradient-to: #{$outer-value};
      }

      @each $inner-key, $inner-value in util.map-handler(util.$map-color-brightness) {

        #{util.class-generator(config.$abbr-background-image-gradient-to, $outer-key, $inner-key)}
        {
          --gradient-to: #{rgba($color: util.lighter-color($outer-value, $inner-value), $alpha: 1)};
        }

      }

    }

  }

}